<template>
  <div class="customer_info">
    <p class="title">采购商信息</p>
    <el-form class="customer-info" :model="form" :label-width="110">
      <div class="customer">
        <div class="_left">
          <el-form-item label="企业名称：">
            <el-input class="boss_input" v-model="form.customerName" readonly></el-input>
          </el-form-item>

          <el-form-item label="组织机构代码：">
            <el-input class="boss_input" v-model="form.organizingInstitutionCode" readonly></el-input>
          </el-form-item>

          <div v-for="item in form.customerQualificationList" :key="item.customerQualificationId">
            <el-form-item v-if="item.qualificationType === 'MEDICAL_INSTITUTION_PRACTICING_LICENSE' || item.qualificationType === 'BUSINESS_LICENSE'" :label="`${consts.SupplierQualificationType.find((e) => e.qualificationType === item.qualificationType).title} ` + ` ： `">
              <el-image class="img" :src="item.qualificationImg" :preview-src-list="[item.qualificationImg]"> </el-image>
            </el-form-item>

            <el-form-item label="证件有效期：" v-if="item.qualificationType === 'BUSINESS_LICENSE' || item.qualificationType === 'MEDICAL_INSTITUTION_PRACTICING_LICENSE'">
              <el-date-picker class="date_input" v-model="item.effectiveDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" readonly /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker class="date_input" v-model="item.expiredDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" readonly />
            </el-form-item>
          </div>

          <el-form-item label="法人姓名：">
            <el-input class="boss_input" v-model="form.legalPersonName" readonly></el-input>
          </el-form-item>
        </div>

        <div class="_right">
          <el-form-item label="身份证号：">
            <el-input class="boss_input" v-model="form.legalPersonIdNumber" readonly></el-input>
          </el-form-item>
          <el-form-item label="身份证正反面：">
            <div v-if="form.legalPersonCardPictureObverse || form.legalPersonCardPictureReverse">
              <el-image class="img" :src="form.legalPersonCardPictureObverse" :preview-src-list="[form.legalPersonCardPictureObverse]"> </el-image>
              <el-image class="img" :src="form.legalPersonCardPictureReverse" :preview-src-list="[form.legalPersonCardPictureReverse]"> </el-image>
            </div>
          </el-form-item>

          <el-form-item class="date_card" label="证件有效期：">
            <el-date-picker class="boss_input" v-model="form.legalPersonCardStartDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" readonly /><el-icon class="time-icon"><Minus /></el-icon> <el-date-picker class="date_input" v-model="form.legalPersonCardEndDate" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" readonly />
          </el-form-item>
        </div>
      </div>

      <div class="customer_store">
        <div class="_left">
          <el-form-item label="采购商ID：">
            <el-input class="boss_input" v-model="form.customerId" readonly></el-input>
          </el-form-item>
          <el-form-item label="登录手机号：">
            <el-input class="boss_input" v-model="form.account" readonly></el-input>
          </el-form-item>
          <el-form-item label="联系人：">
            <el-input class="boss_input" v-model="form.contactMan" readonly></el-input>
          </el-form-item>
          <el-form-item label="联系电话：">
            <el-input class="boss_input" v-model="form.contactPhone" readonly></el-input>
          </el-form-item>
        </div>

        <div class="_right">
          <el-form-item label="联系地址：">
            <el-input class="boss_input" v-model="form.registeredAddress" readonly></el-input>
          </el-form-item>
          <el-form-item label="纳税识别号：">
            <el-input class="boss_input" v-model="form.taxpayerId" readonly></el-input>
          </el-form-item>
          <el-form-item label="开户行：">
            <el-input class="boss_input" v-model="form.depositBank" readonly></el-input>
          </el-form-item>
          <el-form-item label="银行账户：">
            <el-input class="boss_input" v-model="form.bankAccount" readonly></el-input>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script setup>
import { Minus } from '@element-plus/icons-vue'
import consts from '@/consts'
defineProps(['form'])
</script>
<style scoped lang="scss">
.customer_info {
  padding: 20px 80px 0 20px;
  background-color: #fff;

  .title {
    line-height: 16px;
    color: var(--color-primary-text);
    font-size: 16px;
    font-weight: 500;
  }

  .customer-info {
    .boss_input {
      width: 416px;
    }

    .img {
      width: 76px;
      height: 76px;
      margin-right: 20px;
    }

    .date_card {
      :deep(.el-form-item__content) {
        flex-wrap: nowrap;
      }

      .time-icon {
        font-size: 8px;
        margin: 0 11px;
        color: #909399;
      }
    }

    .customer,
    .customer_store {
      padding-top: 20px;
      display: flex;
      justify-content: space-between;
    }

    .customer {
      border-bottom: 1px solid var(--border-color);
    }
  }
}
</style>
